<template>
  <div class="gaugeCharts" ref="gaugeCharts"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  series: [
    {
      type: "gauge",
      startAngle: 180,
      endAngle: 0,
      center: ["50%", "70%"],
      radius: "115%",
      progress: {
        show: true,
        width: 20,
        itemStyle: {
          color: "#279CCE",
        },
      },
      axisLine: {
        lineStyle: {
          width: 20,
          color: [[1, "#1D6697"]],
        },
      },
      axisTick: {
        show: false,
      }, //细的分割线
      splitLine: {
        length: 12,
        distance: 0,
        lineStyle: {
          width: 8,
          color: "#1E689A",
        },
      }, //刻度分割线
      axisLabel: {
        distance: 30,
        color: "#ccc",
        fontSize: 18,
        formatter: (val) => {
            console.log(val);
          if (val === 20) {
            return "差";
          } else if (val === 40) {
            return "中";
          } else if (val === 60) {
            return "良";
          } else if (val === 80) {
            return "优";
          }
        },
      }, //内部刻度文字
      anchor: {
        show: true,
        showAbove: true,
        size: 20,
        itemStyle: {
          color: "#0e2344",
          borderWidth: 3,
          borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#58479A",
            },
            {
              offset: 1,
              color: "#45BFE2",
            },
          ]),
        },
      }, //中心圈
      pointer: {
        length: "50%",
        width: 3,
      }, //指针
      detail: {
        valueAnimation: true,
        offsetCenter: [0, "30%"],
        fontSize: 40,
        formatter: (val) => {
          return `{num|${val}}\n{text|健康度}`;
        },
        rich: {
          num: {
            fontSize: 40,
            color: "#fff",
            fontWeight: 700,
          },
          text: {
            fontSize: 22,
            color: "#ccc",
          },
        },
      }, //详情文字
      data: [
        {
          value: 70,
        },
      ],
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.gaugeCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.gaugeCharts {
  width: 100%;
  height: 100%;
}
</style>
